<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <table>
      <thead>
        <caption>
          商品
        </caption>
      </thead>
      <tbody>
        <tr>
          <td>炸鸡</td>
          <td>28元</td>
          <td><button id="zjtaiduola">-</button></td>
          <td><span id="zjsl">0</span></td>
          <td><button id="zjtaishaola">+</button></td>
        </tr>
        <tr>
          <td>可乐</td>
          <td>5元</td>
          <td><button id="kltaiduola">-</button></td>
          <td><span id="klsl">0</span></td>
          <td><button id="kltaishaola">+</button></td>
        </tr>
        <tr>
          <td>总价：</td>
          <td><span id="total">0</span></td>
        </tr>
      </tbody>
    </table>

    <script type="text/javascript">
      // 补全代码
      /**
       * 请补全JavaScript代码，要求如下：
        1. 当点击"-"按钮时，商品数量减1
        2. 当点击"+"按钮时，商品数量加1
        3. 每当点击任意按钮时，购物面板中相关信息必须同步更新
        注意：
        1. 必须使用 DOM0 级标准事件（onclick）
      */
      var shopCar = {
        zjCount: 0,
        klCount: 0,
        totolPrice: 0
      }
      var zjslDom = document.getElementById('zjsl')
      var klslDom = document.getElementById('klsl')
      var totalDom = document.getElementById('total')

      // 通过 defineProperty 监听数据变化
      function defineReactive(target, key, value) {
        Object.defineProperty(target, key, {
          get: function() {
            return value
          },
          set: function(newVal) {
            if (newVal !== value) {
              value = newVal
              render()
            }
          }
        })
      }
      defineReactive(shopCar, 'zjCount', 0)
      defineReactive(shopCar, 'klCount', 0)

      function render() {
        zjslDom.innerText = shopCar.zjCount
        klslDom.innerText = shopCar.klCount
        totalDom.innerText = Number(shopCar.zjCount) * 28 + Number(shopCar.klCount) * 5
      }
      zjtaiduola.onclick = function() {
        if (shopCar.zjCount <= 0) return
        shopCar.zjCount -= 1
      }
      zjtaishaola.onclick = function() {
        shopCar.zjCount += 1
      }
      kltaiduola.onclick = function() {
        if (shopCar.klCount <= 0) return
        shopCar.klCount -= 1
      }
      kltaishaola.onclick = function() {
        shopCar.klCount += 1
      }
    </script>
  </body>
</html>
